<template>
  <div>
    <div id="g_top" class="m-top">&nbsp;</div>
    <!-- 登录之前的遮罩层 -->
    <div class="g-bd g-bd-full" v-if="!$store.state.userId ">
      <div class="n-pglg"></div>
    </div>
    <!-- 登陆后的主体内容 -->
     <div
      class="g-mymusic"
      :style="{ height: height + 'px' }"
      v-if="$store.state.userId"
    >
      <div
        class="g-bd3 p-mymusic f-cb"
        :style="{ 'min-height': height + 'px' }"
        ref="db"
      >
        <!-- 左侧边栏 -->
        <div
          class="g-sd3 u-scroll n-musicsd j-flag"
          :style="{ height: height + 'px' }"
        >
            <mymusicSidebar :userId ="userId"></mymusicSidebar>
        </div>
        <div class="g-mn3 f-pr j-flag">
            <keep-alive>
               <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
               <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
      </div>
    </div> 
  </div>
</template>
<script>
import { userPlaylist } from "../../network/login";
export default {
  data() {
    return {
      height: document.documentElement.clientHeight -80, //高度
      userId:null,
    };
  },
  components: {
    mymusicSidebar: () => import("./mymusic_sidebar.vue"),
  },
  watch: {
    //如果在这个页面登录会关闭遮罩 重新获取数据渲染
    "$store.state.userId": function (value) {
      if (value) {
        this.userId = parseInt(value);
      }
    },
  },
  created() {
    if (this.$store.state.userId) {
      //进入页面开始渲染
      this.userId = parseInt(this.$store.state.userId);
    }
  },
  mounted() {
    var that = this;
    window.onresize = function () {
      that.height = document.documentElement.clientHeight -80;
    };
  },
};
</script>
<style scoped>
.m-top {
  position: relative;
  z-index: 100;
  height: 70px;
  box-sizing: border-box;
  background: #242424;
  border-bottom: 1px solid #000;
}
.m-subnav {
  z-index: 99;
  height: 35px;
  box-sizing: border-box;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
}
.g-bd {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
}
.n-pglg {
  width: 807px;
  height: 268px;
  margin: 0 auto 0;
  padding-top: 104px;
  background: url("../../assets/imgs/mymusic.png") no-repeat;
  background-position: 0 104px;
}
.n-musicsd {
  padding-bottom: 50px;
  padding-top: 40px;
}
.p-mymusic .g-sd3 {
  overflow-y: auto;
  overflow-x: hidden;
}
.n-musicsd {
  padding-bottom: 50px;
  padding-top: 40px;
}
.g-sd3 {
  float: left;
  width: 240px;
  position: fixed;
}
.g-mymusic {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  zoom: 1;
}
.g-bd3 {
  width: 980px;
  background: url("../../assets/imgs/wrap3.png") repeat-y center 0;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  margin: 0 auto;
}
.g-mn3 {
  height: 100%;
  float: right;
  width: 740px;
  padding-bottom: 50px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
.u-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.u-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  box-shadow: inset 1px 1px 0 rgb(0 0 0 / 10%);
}
.u-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(0 0 0 / 0%);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>